@use "../../default" as theme;
.pf-Floating{
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
	z-index:1;
	$-placements:(top:bottom,bottom:top,left:right,right:left);
	@each $-placement,$-props in $-placements{
		&.pf--placement-#{$-placement}{
			.pf-Floating_arrow{
				#{$-props}:calc(1px - 1em);
				border-#{$-placement}-color:currentColor;
			}
			&.pf--animation-scale,&.pf--animation-perspective{
				transform-origin:$-props;
			}
			&.pf--animation-perspective{
				&.#{theme.$enter-from-name},&.v-leave-to{
					@if $-placement==top {
						transform:
							perspective(#{theme.$Floating-perspective})
							translateY(#{theme.$Floating-perspective-translate})
							rotateX(#{theme.$Floating-perspective-rotate});
					} @else if $-placement==bottom {
						transform:
							perspective(#{theme.$Floating-perspective})
							translateY(#{- theme.$Floating-perspective-translate})
							rotateX(#{- theme.$Floating-perspective-rotate});
					} @else if $-placement==left {
						transform:
							perspective(#{theme.$Floating-perspective})
							translateX(#{theme.$Floating-perspective-translate})
							rotateY(#{- theme.$Floating-perspective-rotate});
					} @else if $-placement==right {
						transform:
							perspective(#{theme.$Floating-perspective})
							translateX(#{- theme.$Floating-perspective-translate})
							rotateY(#{theme.$Floating-perspective-rotate});
					}
				}
			}
		}
	}
	&.pf--animation-scale{
		&.v-enter-active,&.v-leave-active{
			transition: theme.$Floating-transition;
			transition-property:transform,opacity;
		}
		&.#{theme.$enter-from-name},&.v-leave-to{
			transform:scale(#{theme.$Floating-scale-size});
			opacity:0;
		}
	}
	&.pf--animation-perspective{
		&.v-enter-active,&.v-leave-active{
			transition: theme.$Floating-transition;
			transition-property:transform,opacity;
		}
		&.#{theme.$enter-from-name},&.v-leave-to{
			opacity:0;
		}
	}
}
.pf-Floating_arrow{
	position:absolute;
	color: theme.$Floating-bg-color;
	border-style:solid;
	border-width:0.5em;
	border-color:transparent;
}
.pf-Floating_content{
	position:relative;
	padding: theme.$Floating-padding;
	border-radius: theme.$Floating-radius;
	background: theme.$Floating-bg-color;
	color: theme.$Floating-color;
	word-break:break-all;
	pointer-events:initial;
	font-size: theme.$Floating-content-size;
	overflow:hidden;
	z-index:1;
}